<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建元素和添加元素</title>
</head>

<body>
    <h3>append()方法后追加内容</h3>
    <h3>apppendTo()方法后追加内容</h3>
    <span class="red">男神</span>
    <span class="blue">偶像</span>
    <div class="green">
        <span>小奶狗</span>
    </div>
</body>
<script src="./jQuery包/jquery-3.6.0.js"></script>
<script>
    //  创建元素 
    //  创建一个元素直接用上$("里面放上元素")
    var p = $("<p>你好啊</p>");
    var h1 = "<h1>你好世界</h1>";
    var H1 = $(h1);
    console.log(H1.html());
    //添加元素
    // 1.前追加子元素：指定元素.prepend(内容);   在指定元素内部的最前面追加内容，内容可以是字符串、html元素或jq对象
    //                $(内容)prependTo(指定元素);    把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jq对象
    // 2.后追加子元素：指定元素.append(内容);   在指定元素内部的最后面追加内容，内容可以是字符串、html元素或jq对象
    //                $(内容)apppendTo(指定元素);    把内容追加到指定元素内部的最后面，内容可以是字符串、html元素或jq对象
    // 3.前追加同级元素 before()  在指定元素的前面追加内容
    // 4.后追加同级元素after() 在指定元素的后面追加内容
</script>

</html>